<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="../Master/adminMaster.xhtml">
            <ui:define name="page-content">

                <section class="grid_12" id="dashtabs">
                    <div class="box-header">
                        Articles Manager
                        <ul class="controls"></ul>
                    </div>
                    <div id="dashtabs-pages" class="box-content no-padding">
                        <f:view>
                            <h:form id="form">

                                <p:growl id="messages" showDetail="true"/>

                                <p:dataTable var="item" value="#{articleMBean.articles}" id="articlesList" editable="true"
                                             paginator="true" rows="10" style="width: 100% !important;"
                                             paginatorPosition="bottom" 
                                             rowsPerPageTemplate="5,10,15" styleClass="table no-border"
                                             emptyMessage="No article found with given criteria" filteredValue="#{articleMBean.filteredArticles}"
                                             widgetVar="articlesTable" rowKey="#{item.articlesId}">

                                    <f:facet name="header">  
                                        <p:outputPanel style="float: right;">  
                                            <h:outputText value="Search all fields:" />  
                                            <p:inputText id="globalFilter" onkeyup="articlesTable.filter()" style="width:150px" />  
                                        </p:outputPanel>  
                                    </f:facet>

                                    <p:column headerText="Title" style="width:200px !important;" filterBy="#{item.articlesTitle}" 
                                              filterMatchMode="contains" sortBy="#{item.articlesTitle}">
                                        <h:outputText value="#{item.articlesTitle}" />
                                    </p:column>

                                    <p:column headerText="Content" filterBy="#{item.articlesContent}" 
                                              filterMatchMode="contains" sortBy="#{item.articlesContent}">
                                        <h:outputText value="#{item.articlesContent.substring(0, 200)}" rendered="#{item.articlesContent.length() gt 200}" escape="false"/>
                                        <h:outputText value="#{item.articlesContent}" rendered="#{item.articlesContent.length() lt 200}" escape="false"/>
                                    </p:column>

                                    <p:column headerText="Create Date" filterBy="#{item.articlesCreateDate}" 
                                              filterMatchMode="contains" sortBy="#{item.articlesCreateDate}">
                                        <h:outputText value="#{item.articlesCreateDate}">
                                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                                        </h:outputText>
                                    </p:column>

                                    <p:column headerText="Options" style="width:100px !important;" styleClass="last">
                                        <p:commandLink oncomplete="dlgView.show()" update=":form:dialogViewArticle" title="View">
                                            <p:graphicImage value="../CSS/images/information.png"></p:graphicImage>
                                            <f:setPropertyActionListener value="#{item}" target="#{articleMBean.selectedArticle}"/> 
                                        </p:commandLink>
                                        <p:commandLink id="editArticle" title="Edit"
                                                       action="#{articleMBean.actionEditArticle()}">
                                            <p:graphicImage value="../CSS/images/pencil.png"></p:graphicImage>
                                            <f:param name="articleID" value="#{item.articlesId}" />
                                            <f:param name="Return" value="#{articleMBean.navReturn} " />
                                        </p:commandLink>
                                        <h:panelGroup rendered="#{login.customer.membersRole == 2}">
                                            <p:commandLink id="showDialog" onclick="confirmation.show()"
                                                           title="Remove" update=":form:display">
                                                <p:graphicImage value="../CSS/images/cross_circle.png" alt=""></p:graphicImage>
                                                <f:setPropertyActionListener value="#{item}" target="#{articleMBean.selectedArticle}" />
                                            </p:commandLink>
                                        </h:panelGroup>
                                    </p:column>

                                </p:dataTable>

                                <p:confirmDialog id="confirmDialog" message="Are you sure about remove this article?"  
                                                 header="Initiating destroy process" 
                                                 severity="alert" widgetVar="confirmation">  
                                    <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  

                                        <p:commandButton id="confirm" value="Yes Sure" update=":form:messages,:form:articlesList" 
                                                         oncomplete="confirmation.hide()"
                                                         actionListener="#{articleMBean.removeArticle}">

                                        </p:commandButton>
                                        <p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide()"/>

                                    </h:panelGrid>  
                                </p:confirmDialog>

                                <p:dialog id="dialogViewArticle" header="Article" widgetVar="dlgView" showEffect="slideToogle" style="background-color: #FAFAFA;">  
                                    <table border="0" cellpadding="0" cellspacing="0" id="id-form">
                                        <tr>
                                            <th valign="top" class="id-form-th"><label>Title:</label></th>
                                            <td class="id-form-td">
                                                <h:outputText id="articleTitle" value="#{articleMBean.selectedArticle.articlesTitle}" style="line-height: 28px;"/>        
                                            </td>
                                            <td class="id-form-td"></td>
                                        </tr>

                                        <tr>
                                            <th valign="top" class="id-form-th"><label>Content:</label></th>
                                            <td class="id-form-td">
                                                <pe:ckEditor id="articleContent" value="#{articleMBean.selectedArticle.articlesContent}" 
                                                             skin="v2" width="100%" height="300" readOnly="true">  
                                                </pe:ckEditor>
                                            </td>
                                            <td class="id-form-td"></td>
                                        </tr>

                                        <tr>
                                            <th valign="top" class="id-form-th"><label>Create date:</label></th>
                                            <td class="id-form-td">
                                                <h:outputText value="#{articleMBean.selectedArticle.articlesCreateDate}" style="line-height: 28px;">
                                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                                </h:outputText>
                                            </td>
                                            <td class="id-form-td"></td>
                                        </tr>
                                    </table>
                                </p:dialog>
                            </h:form>
                        </f:view>
                    </div>

                </section>
                <br class="cl" />
            </ui:define>
        </ui:composition>
    </h:body>
</html>

